<template>
  <div class="main2-back">
    <div class="main2-post" v-if="!hasLogin">
      <p class="one"><span :class="selected==1?'selected':''" @click="loginOrRegister(1)">登陆</span><span
        :class="selected==2?'selected':''" @click="loginOrRegister(2)">注册</span></p>
      <div v-if="selected==1">
        <p class="two"><input type="text" v-model="username" placeholder="请输入用户名"></p>
        <p class="two"><input type="password" v-model="password" placeholder="请输入密码"></p>
        <p class="three"><span @click="remeberPas"><input type="checkbox"
                                                          :checked="remeberPassword">记住密码</span><span
          class="forget-password" @click="forgetPasModal=true">忘记密码</span>
        </p>
        <p class="four">
          <button @click="login">登陆</button>
        </p>
      </div>
      <div v-if="selected==2">
        <p class="two"><input type="text" v-model="registerName" placeholder="请输入用户名"></p>
        <p class="two"><input type="password" v-model="registerPas" placeholder="请输入密码"></p>
        <p class="two"><input type="password" v-model="registerPasConfirm" placeholder="请再次输入密码"></p>
        <p class="two"><input type="text" v-model="mail" placeholder="请输入邮箱"></p>
        <!--<p class="get-code"><input type="text" v-model="verifyCode">-->
        <!--<button>获取验证码</button>-->
        <!--</p>-->
        <p class="four" style="margin-top: 20px;">
          <button @click="register">注册</button>
        </p>
      </div>
    </div>
    <Modal v-model="forgetPasModal" class-name="forgetpas-modal" width="320px" v-bind:closable="false" @on-ok="submit">
      <p class="item"><input type="text" placeholder="请输入邮箱" v-model="reset_mail">
        <button @click="getCode"
                class="get_code" :class="second==0?'':'dark_button'" :disabled="second!=0">
          {{second ==0?'获取验证码':second+'s'}}
        </button>
      </p>
      <p class="item"><input type="text" placeholder="请输入验证码" v-model="reset_code"></p>
      <p class="item"><input type="password" placeholder="请输入新密码" v-model="reset_pas"></p>
      <p class="item"><input type="password" placeholder="请确认密码" v-model="reset_pas_confirm"></p>
      <div slot="footer">
        <Button type="text" size="large" @click="forgetPasModal=false">取消</Button>
        <Button type="primary" size="large" @click="submit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import axios from 'axios';
  import {apiPre} from "../js/config";
  import event from '../components/event';
  import {checkMail} from '../js/utils';

  export default {
    name: "login2",
    data() {
      return {
        username: '',
        password: '',
        hasLogin: '',
        remeberPassword: false,
        selected: 1,
        mail: '',
        registerPas: '',
        registerPasConfirm: '',
        verifyCode: '',
        registerName: '',
        forgetPasModal: false,
        second: 0,
        reset_mail: '',
        reset_code: '',
        reset_pas: '',
        reset_pas_confirm: ''
      }
    },
    methods: {
      // getCode() {
      //     axios.get(apiPre + 'register').then((res) => {
      //         // console.log('res', res);
      //         this.imgUrl = 'data:image/jpg;base64,' + res.data;
      //     }).catch((err) => {
      //         console.log('err', err);
      //         this.$Notice.error({desc: '获取验证码失败', duration: 2})
      //     })
      // },
      register() {
        if (!this.registerName) {
          this.$Notice.warning({desc: '请输入用户名'});
          return;
        }
        if (!this.registerPas) {
          this.$Notice.warning({desc: '请输入密码'});
          return;
        }
        if (this.registerPas != this.registerPasConfirm) {
          this.$Notice.warning({desc: '请确保两次输入的密码一致'});
          return;
        }
        if (!this.mail) {
          this.$Notice.warning({desc: '请输入邮箱'});
          return;
        }
        axios.post(apiPre + 'register2', {
          username: this.registerName,
          password: this.registerPas,
          mail: this.mail
        }).then((res) => {
          if (res.data == 2) {
            this.$Notice.error({desc: '用户已存在', duration: 2});
            // this.getCode();
          } else if (res.data == 4) {
            this.$Notice.warning({desc: '该邮箱已被注册', duration: 2})
          } else {
            this.$Notice.success({desc: '注册成功', duration: 2})
            this.selected = 1;
          }
        }).catch((err) => {
          console.log('err', err);
          this.$Notice.error({desc: '注册失败', duration: 2})
          // this.getCode();
        })
      },
      login() {
        console.log(this.remeberPassword);
        axios.post(apiPre + 'login',
          {
            username: this.username,
            password: this.password
          }).then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            this.$Notice.warning({desc: '用户不存在', duration: 2})
          } else if (res.data.status == 1) {
            this.$Notice.warning({desc: '密码错误', duration: 2})
          } else if (res.data.status == 2) {
            this.$Notice.success({desc: '登陆成功', duration: 2});
            window.localStorage.setItem('screeningLogin', res.data.token);
            window.localStorage.setItem('user', this.username);
            event.$emit('loginSuccess');
            this.$router.push('/screening2');
            if (this.remeberPassword) {
              window.localStorage.setItem('username', this.username);
              window.localStorage.setItem('password', this.password);
            }
          }
        }).catch((err) => {
          this.$Notice.error({desc: '登陆失败', duration: 2})
        })
      },
      remeberPas() {
        console.log(this.remeberPassword);
        this.remeberPassword = !this.remeberPassword;
        window.localStorage.setItem('rememberPassword', this.remeberPassword);
      },
      loginOrRegister(num) {
        this.selected = num;
      },
      getLogin() {
        var rememberPas = window.localStorage.getItem('rememberPassword');
        this.remeberPassword = window.localStorage.getItem('rememberPassword') ? (window.localStorage.getItem('rememberPassword') == 'false' ? false : true) : false;
        if (rememberPas == 'true') {
          this.username = window.localStorage.getItem('username');
          this.password = window.localStorage.getItem('password');
        }
        this.hasLogin = window.localStorage.getItem('screeningLogin')
      },
      getCode() {
        console.log('获取验证码')
        if (!checkMail(this.reset_mail)) {
          this.$Message.info({content: '请输入正确的邮箱'})
          return;
        }
        axios.post(apiPre + 'mail', {mail: this.reset_mail}).then((res) => {
          console.log('mail res', res);
          if (res.data == 2) {
            this.$Notice.success({desc: '验证码发送成功', duration: 2});
            this.second = 30;
            this.interval = setInterval(() => {
              this.second--;
              console.log(this.second);
              if (this.second == 0) {
                clearInterval(this.interval);
                this.second = 0;
              }
            }, 1000)
          } else if (res.data == 0) {
            this.$Notice.warning({desc: '邮箱不存在', duration: 2})
          }
        }).catch((err) => {
          console.log('mail err', err);
        })
      },
      submit() {
        if (!this.reset_code) {
          this.$Message.info({content: '请输入验证码'});
          return;
        }
        if (!this.reset_mail) {
          this.$Message.info({content: '请输入邮箱'});
          return;
        }
        if (this.reset_pas != this.reset_pas_confirm) {
          this.$Message.info({content: '两次输入的密码不一致'});
          return;
        }
        if (!this.reset_pas) {
          this.$Message.info({content: '请输入密码'});
          return;
        }
        if (!this.reset_pas_confirm) {
          this.$Message.info({content: '请确认密码'});
          return;
        }
        axios.put(apiPre + 'mail', {
          mail: this.reset_mail,
          code: this.reset_code,
          password: this.reset_pas
        }).then((res) => {
          console.log('put res', res);
          if (res.data == 0) {
            this.$Notice.error({desc: '验证码错误', duration: 2});
          } else {
            this.$Notice.success({desc: '找回密码成功', duration: 2});
            this.forgetPasModal = false;
            // this.$router.push('/login2')
          }
        }).catch((err) => {
          console.log('put err', err);
          this.$Notice.error({desc: '找回密码失败', duration: 2})
        })
      }
    },
    mounted() {
      this.getLogin();
      event.$on('logout', () => {
        this.getLogin();
      })
      event.$on('loginRegister', (arg) => {
        console.log('loginRegister', arg);
        this.selected = arg;
      })
    },
    destroyed() {
      event.$off('logout');
      event.$off('loginRegister');
      if (!window.sessionStorage.getItem('first_login')) {
        console.log('login emit getOriginData');
        event.$emit('getOriginData', '9999999999999');
        window.sessionStorage.setItem('first_login', 1);
      }
    }
  }
</script>

<style scoped lang="scss">
  .main2-back {
    position: absolute;
    top: 125px;
    bottom: 0;
    /*background-color: rgb(234, 0, 64);*/
    background: url("../assets/back.png") no-repeat;
    background-size: 100%;
    width: 100%;
  }

  .main2-post {
    position: absolute;
    top: 50px;
    right: 50px;
    background-color: rgb(255, 255, 255);
    padding: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    .get-code {
      input {
        width: 100px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        border-radius: 4px;
        border-style: groove;
      }
    }
    .one {
      display: flex;
      justify-content: space-around;
      font-size: 18px;
      span {
        cursor: pointer;
      }
      .selected {
        color: rgb(8, 150, 216);
      }
    }
    .two {
      margin: 20px 0;
      input {
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        width: 100%;
        border-radius: 4px;
        border-style: groove;
      }
    }
    .three {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      input {
        vertical-align: middle;
      }
      span {
        cursor: pointer;
      }
      .forget-password:hover {
        text-decoration: underline;
      }
    }
    .four {
      text-align: center;
      button {
        width: 150px;
        height: 35px;
        line-height: 35px;
      }
    }
  }
</style>
